<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/ol.css" type="text/css">
    <style>
        #map {
            height: 256px;
            width: 512px;
        }
    </style>
    <script src="js/ol.js" type="text/javascript"></script>
    <title>OpenLayers 3 example</title>
</head>
<body>
<h1>My Map</h1>
<div id="map"></div>
<script type="text/javascript">
    var map = new ol.Map({
        interactions: ol.interaction.defaults().extend([
            new ol.interaction.Select({
                style: new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: 5,
                        fill: new ol.style.Fill({
                            color: '#FF0000'
                        }),
                        stroke: new ol.style.Stroke({
                            color: '#000000'
                        })
                    })
                })
            })
        ]),
        target: 'map',
        layers: [
            new ol.layer.Tile({
                title: "Global Imagery",
                source: new ol.source.TileWMS({
                    url: 'http://maps.opengeo.org/geowebcache/service/wms',
                    params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
                })
            }),
            new ol.layer.Vector({
                title: 'Earthquakes',
                source: new ol.source.GeoJSON({
                    url: 'data/layers/7day-M2.5.json'
                }),
                style: new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: 5,
                        fill: new ol.style.Fill({
                            color: '#0000FF'
                        }),
                        stroke: new ol.style.Stroke({
                            color: '#000000'
                        })
                    })
                })
            })
        ],
        view: new ol.View({
            projection: 'EPSG:4326',
            center: [0, 0],
            zoom: 1
        })
    });
</script>
</body>
</html>
